<template>
  <div>
    <HomeTop></HomeTop>
    <div class="">
      <div class="ok-page-width">
<!--        <div>-->
<!--          <el-image style="width: 100%;height: 260px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/image02.jpg')"></el-image>-->
<!--        </div>-->
        <div class="line-20"></div>
        <div class="ok-white">
          <div class="line-20"></div>
          <div class="ok-box-center" style="padding-top: 20px">
            <el-form :inline="true" :model="ok_page" class="user-search">
              <el-form-item>
                <el-input  v-model="ok_page.key" placeholder="请输入产品名字" style="width: 700px;border: #3399ff 2px solid"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-divider><span style="font-size: 30px">热销产品</span></el-divider>
          <div style="padding: 40px">
            <el-carousel :interval="4000" type="card" height="300px">
              <el-carousel-item v-for="item in thisList" :key="item.id">
                <div @click="goView(item)">
                  <el-image style="width: 100%; height: 300px;border-radius: 5px"
                            :src="ok.tool.getImg(item.image)"
                            fit="cover"></el-image>
                  <div style="font-size:20px;text-align: center;position: relative; bottom:60px;z-index: 1;color: #FFFFFF;height: 55px;line-height: 45px; padding-bottom: 10px; overflow: hidden;background-color: rgba(0,0,0,0.5)">
                    {{item.title}}
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-divider content-position="left"><span style="font-size: 30px">特色农产品</span></el-divider>
          <div >
            <div style="width: 100%;">
              <el-row>
                <el-col :span="4" v-for="(item, index) in pagesData.list" :key="index" style="margin: 20px;display: flex;justify-content: space-around;position: relative" >
                  <el-card :body-style="{ padding: '10px' }">
<!--                    <el-image :src="require('@/static/images/image02.jpg')" style="width: 200px;height: 200px;border-radius: 5px" :fit="fill"></el-image>-->
                    <div @click="goView(item)" style="cursor: pointer">
                      <el-image :src="ok.tool.getImg(item.image)" style="width: 200px;height: 200px;"></el-image>
                      <div style="padding: 10px">
                        <div class="ok-box-center-left"><span>{{item.title}}</span></div>
                        <div class="ok-box-center-left">
                          <span style="color: #b7bec9;font-size: 10px">到手价：</span>
                          <span style="color:red;font-size: 20px">￥{{item.price}}</span>
                        </div>
                      </div>
                    </div>

                  </el-card>
                </el-col>
              </el-row>
            </div>
            <div class="block">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="pagesData.current"
                  :page-sizes="[5, 10, 20, 50]"
                  :page-size="pagesData.pageSize"
                  layout="sizes, prev, pager, next"
                  :total="pagesData.total">
              </el-pagination>
            </div>
            <div class="line-20"></div>
          </div>
        </div>

      </div>
    </div>
    <div class="line-20"></div>
    <HomeFoot></HomeFoot>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeTop from "@/components/HomeTop.vue";
import api from "@/api/publicApi"
import ok from "@/assets/ok";
import el from "element-ui/src/locale/lang/el";
import HomeFoot from "@/components/HomeFoot.vue";

export default {
  name: 'ProductIndex',
  computed: {
    ok() {
      return ok
    }
  },
  components: {
    HomeFoot,
    HomeTop,
  },
  data(){
    return{
      ok_page:{
        key:"",
        pageSize:10,
        current:0,
        status:9
      },
      pagesData:{
        list:[],
        pageSize:0,
        current:0,
        total:0
      },
      saleList:[],
      thisList:[],
    }
  },
  mounted() {
    this.getPage();
    this.getSale();
  },
  methods:{
    getPage(){
      api.getProductPage(this.ok_page).then(res =>{
        this.pagesData = res.result;
      })
    },
    getSale(){
      api.getSale().then(res =>{
        this.saleList = res.result;
        console.log(this.saleList)
        this.saleList.forEach((item)=>{
          api.getProduct({id:item.productId}).then(the =>{
            this.thisList.push(the.result);
          })
          console.log(this.thisList)
        });
      });


    },
    goView(item){
      this.$router.push({
        path:"/views/product/productView",
        query:{
          id:item.id
        }
      })
    },
    search(){
      this.getPage();
    },
    textCut(text){
      if (text.length>8){
        return text.slice(0,8)+"..."
      }else {
        return text;
      }
    },
    handleSizeChange(val){
      this.ok_page.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val){
      this.ok_page.current = val;
      this.getPage()
    },
  }
}
</script>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
